<!DOCTYPE html>
<html>
<head>
	<title>border</title>
</head>
<body>
	<div class="style1"> solid</div>
	<div class="style2">dotted</div>
	<div class="style3">double</div>
	<div class="style4">groove</div>
	<div class="style5">ridge</div>
	<div class="style6">inset</div>
	<div class="style7">dashed</div>
	<div class="style8">left</div>
	<div class="style9">bottom</div>
</body>
</html>
<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	body{
		margin: 0px;
		padding: 0px;
	}
	.style1{
		margin-top:4px; 
		margin-left: 500px;
		width: 200px;
		height: 40px;
		border:1px solid red;
	}
	.style2{
		margin-left:500px;
		margin-top: 2px;
		width: 200px;
		height: 40px;
		border: 3px dotted green;
	}
	.style3{
		margin-left:500px;
		margin-top: 2px;
		width: 200px;
		height: 40px;
		border: 3px double blue;
	}
	.style4{
		margin-left:500px;
		margin-top: 2px;
		width: 200px;
		height: 40px;
		border: 3px groove green;
	}
	.style5{
		margin-left:500px;
		margin-top: 2px;
		width: 200px;
		height: 40px;
		border: 10px ridge green;
	}
	.style6{
		margin-left:500px;
		margin-top: 2px;
		width: 200px;
		height: 40px;
		border: 10px inset green;
	}
	.style7{
		margin-left:500px;
		margin-top: 2px;
		width: 200px;
		height: 40px;
		border: 5px dashed green;
	}
	.style8{
		margin-left:500px;
		margin-top: 2px;
		width: 200px;
		height: 40px;
		border-left: solid 4px blue;
	}
	.style9{
		margin-left:500px;
		margin-top: 2px;
		width: 200px;
		height: 40px;
		border-bottom: solid 4px  blue;
	}
</style>